{{ define "main" }}

<header>
    <div class="container">
        <h1>{{ .Title }}</h1>
        <p class="subtitle">{{ .Params.subtitle }}</p>
    </div>
</header>

{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}

<section>
    <div class="container">
        <div class="filter-container">
          {{ $maxCategoryToShow := $.Site.Params.maxCategoryToShow | default 5 }}
          {{ range .Site.Taxonomies.categories.TaxonomyArray | first $maxCategoryToShow }}
            <div class="filter-item" data-value="{{ .Page.Title }}" data-type="categories">
              {{ .Page.Title }}<sup>{{ .Count }}</sup>
            </div>
          {{ end }}
        </div>
        <input id="search-query" type="search" placeholder="Search for anything...">
        
        <div id="search-results">
        </div>
        <section id="articles-list">
            {{ range $pages.GroupByDate "2006" }}
            <section>
                <h2>{{ .Key }}</h2>
                <div class="posts">
                    {{ range .Pages }}
                    <div class="post">
                        <a href="{{ .RelPermalink }}">
                            <div class="post-row">
                                <time>{{ .Date.Format "01-02" }}</time>
                                <h3>{{ .Title }}</h3>
                            </div>
                        </a>
                    </div>
                    {{ end }}
                </div>
            </section>
            {{ end }}
        </section>
    </div>
</section>

{{- $opts := dict "minify" hugo.IsProduction -}}
{{ $search := resources.Get "ts/search.ts" | js.Build $opts | fingerprint }}
<script async src="{{ $search.RelPermalink }}"></script>

{{ end }}
